{% load staticfiles %}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>图书分享</title>

    <!-- Bootstrap core CSS -->
      <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
      <link href="{% static 'css/offcanvas.css' %}" rel="stylesheet">
      <link  href="{% static 'css/animate.min.css' %}" rel='stylesheet'/>
      <link href="{% static 'css/user-book.css' %}" rel="stylesheet">
      <link href="{% static 'css/font-awesome.min.css' %}" rel='stylesheet'>
      {% block css %}{% endblock %}
  </head>

  <body style="background-color: #f4f5f6">

    <nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
      <div class="container">
          <a class="navbar-brand" href="{% url 'index' %}">在线图书分享</a>
          <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="navbar-collapse  offcanvas-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item {% ifequal current_page '' %}active{% endifequal %}">
                <a class="nav-link " href="{% url 'index' %}">首页</a></li>
              <li class="nav-item {% ifequal current_page 'book_list' %}active{% endifequal %}" >
                <a class="nav-link" href="{% url 'books:book_list' %}">图书</a>
              </li>
              <li class="nav-item {% ifequal current_page 'user_list' %}active{% endifequal %}">
                <a class="nav-link " href="{% url 'users:user_list' %}">书友</a>
              </li>

            {% if request.user.is_authenticated %}
{#                <li class="nav-item">#}
{#                    <a class="nav-link" href="#">关注</a>#}
{#                </li>#}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img src="{{ request.user.avatar.url }}" alt="" class="mr-2 rounded" style="width: 20px; height: 20px;">
                    </a>
                    <div class="dropdown-menu" aria-labelledby="dropdown01">
                      <a class="dropdown-item" href="{% url 'users:user_profile'  request.user.id %}">我的主页</a>
                      <a class="dropdown-item" href="{% url 'books:upload_book' %}">上传图书</a>
                      <a class="dropdown-item" href="{% url 'users:user_logout' %}">退出登录</a>
                    </div>
                </li>
            {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'users:user_register' %}">注册</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'users:user_login' %}">登录</a>
                </li>
            {% endif %}
            </ul>


            <form class="form-inline my-2 my-lg-0" action="{% url 'haystack_search' %}">
              <input class="form-control mr-sm-2" id="unit" type="search" name="q" placeholder="这里输入关键词..." aria-label="Search">
              <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜书</button>
            </form>
          </div>
      </div>
    </nav>

{#    <div class="nav-scroller bg-white box-shadow">#}
{#      <nav class="nav nav-underline container" >#}
{#        <a class="nav-link active" href="#">发现</a>#}
{#        <a class="nav-link" href="#">#}
{#            图书#}
{#        </a>#}
{#        <a class="nav-link" href="#">#}
{#            关注#}
{#            <span class="badge badge-pill bg-light align-text-bottom">27</span>#}
{#        </a>#}
{#        <a class="nav-link" href="#">书友</a>#}
{#        <a class="nav-link" href="#">Link</a>#}
{#        <a class="nav-link" href="#">Link</a>#}
{#        <a class="nav-link" href="#">Link</a>#}
{#        <a class="nav-link" href="#">Link</a>#}
{#        <a class="nav-link" href="#">Link</a>#}
{#      </nav>#}
{#    </div>#}

    <main role="main">
      {% block main %}
      
      {% endblock %}


       {% block modal %}

       {% endblock %}
    </main>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="{% static 'js/jquery-slim.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/bootstrap.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/holder.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/offcanvas.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/bootstrap-notify.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/app.js' %}" type="text/javascript"></script>
    <script type="text/javascript">
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
        });
    </script>
    {% block custom_js %}
    
    {% endblock %}
  </body>
</html>
